<template>
	<!-- <nav>
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link>
	</nav> -->

	<router-view v-slot="{ Component, route }">
		<!-- 使用任何自定义过渡和回退到 `fade` -->
		<transition :name="route.meta.transition || 'fade'">
			<component :is="Component" />
		</transition>
	</router-view>

</template>

<style lang="scss">
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

nav {
	padding: 30px;

	a {
		font-weight: bold;
		color: #2c3e50;

		&.router-link-exact-active {
			color: #42b983;
		}
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
	transition: all 0.5s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
	transform: translateX(200px);
}
</style>

<script setup>
	import "./assets/css/core1.chunk.css";
	import "./assets/css/core2.chunk.css";
</script>